<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="x5-fullscreen" content="true" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <link rel="icon" type="image/x-icon" href="software.png" />
  <title>国际粮食贸易网络在线地理信息系统</title>

  <!--第三方lib-->
  <script type="text/javascript" src="/js/include-lib.js" libpath="/lib/"
    include="jquery,layer,toastr,font-awesome,ztree,jquery.minicolors,jedate,bootstrap,bootstrap-table,bootstrap-checkbox,bootstrap-slider,layer,haoutil,toastr,mars3d,font-awesome,localforage,es5-widget"></script>

  <link href="/css/style.css" rel="stylesheet" />
  <link href="./PoiQueryButton.css" rel="stylesheet" />
  <script src="./PoiQueryButton.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.js"></script>

  <style>
    .fixed-table-container tbody .selected td {
      background-color: #3f4854a9 !important;
    }

    /* 这是导航栏搜索弹出栏的样式 */
    .popup {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 9999;
      background-color: black;
      padding: 10px;
      border: 1px solid #ccc;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* 下面三个是时间条的样式 */
    #slider-container {
      margin: 20px;
    }

    #timeline-slider {
      width: 300px;
    }

    #number-display {
      border: none;
      font-size: 1em;
      text-align: center;
      width: 50px;
      margin-left: 10px;
      /* Add a little space between the slider and the text display */
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(246, 246, 246, 0.5);
      /* 半透明黑色 */
      z-index: 9999;
      /* 位于最上层 */
      cursor: not-allowed;
      /* 鼠标样式为禁止符号 */
    }
  </style>

</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<body class="dark">
  <div id="mars3dContainer" class="mars3d-container"></div>
  <div class="infoview">
    <div>
      登录或注册：
      <input onclick="gotologin()" type="button" class="btn btn-primary" value="前往登录" title="登录" />
      
    </div>
    <div>
      数据导出：
      
      <input id="input_draw_file" type="file" accept=".json,.geojson" style="display: block; opacity: 0.5; color: red;">
      <input onclick="expGeoJSONFile()" type="button" class="btn btn-primary" value="导出GeoJSON" title="保存GeoJSON" />
      <input onclick="expJSONFile()" type="button" class="btn btn-primary" value="导出构造JSON" title="导出构造参数Json" />

    </div>
    <div>
      图层显示：
      <input onclick="openmyshequ()" id="mapvisual" type="button" class="btn btn-primary" value="社团划分可视化"
        title="社团划分可视化" />
      <input onclick="openmypolyline()" id="linevisual" type="button" class="btn btn-primary" value="贸易流可视化"
        title="贸易流可视化" />
      <input onclick="openmypolygon()" id="datavisual" type="button" class="btn btn-primary" value="贸易总额可视化"
        title="贸易总额可视化" />
    </div>

    <div>
      <input onclick="openmyexport();opentable();"  id="exportvisual" type="button" class="btn btn-primary" value="出口十大国家" select_value="0"
        title="出口十大重要国家的可视化" />
      <input onclick="openmyinport();opentable();" id="inportvisual" type="button" class="btn btn-primary" value="进口十大国家"  select_value="0"
        title="进口十大重要国家的可视化" />
      <input onclick="openmylaplace();opentable();" id="laplacevisual" type="button" class="btn btn-primary" value="中心性重要国家"  select_value="0"
        title="中心性重要国家的可视化" />
    </div>

    <div class="dropdown">
      数据分析：
      <button class="btn btn-primary dropdown-toggle" type="button" id="mapvisual" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false" value="分析图表" title="数据分析的结果图展示">
        指标分析
      </button>
      <div class="dropdown-menu flex-column" aria-labelledby="mapvisual">
        <a href="table1.html" target="_blank">
          <input id="map1" type="button" class="btn btn-primary" value="平均强度及度中心性演化分析" title="平均强度及度中心性演化分析" />
        </a>
        <a href="table3.html" target="_blank">
          <input id="map3" type="button" class="btn btn-primary" value="社团演化分析" title="社团演化分析" />
        </a>
        <a href="table4.html" target="_blank">
          <input id="map4" type="button" class="btn btn-primary" value="规模演化分析" title="规模演化分析" />
        </a>
      </div>
    </div>

  </div>
  <div class="tablecontainer" id="getA" style="display: none;">
    <div class="tablebox" id="main" style="width: 600px; height: 400px;margin-bottom: 5px;">
      <div id="chart1" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart2" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart3" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart4" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart5" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart6" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart7" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart8" style="width: 600px; height: 400px; display: none;"></div>
      <div id="chart9" style="width: 600px; height: 400px; display: none;"></div>
    </div>
  </div>
  <table id="graphicTable"></table>
  <!--下面是时间轴放的位置 -->

  <div class="timeview" style="width: 800px; height: 20px;">
    <input type="range" id="yearSlider" min="2011" max="2019" step="1" value="2011" onchange="updateChart()"
      style="width: 800px; height: 20px;">
  </div>
  <p id="currentTime"></p>

  <script>
    // 全局变量
    var TimeValue = 2011; // 初始化为2011年
    var flag = 0;//记录点击的是哪个状态
    var userName="aa"
    function gotologin() {
  window.location.href = "登录.html";
}
  </script>
  
  <script src="/js/common.js"></script>
  <script src="./map.js"></script>
  <script src="/js/graphic_layer_state.js"></script>
  <script src="/js/mytable.js"></script>
  <script type="text/javascript">
    "use script" //开发环境建议开启严格模式

    function initUI(options) {
      bindAttributePannel()

      setTimeout(() => {
        if (graphicLayer) {
          $("#enabledShowHide").attr("checked", graphicLayer.show)
          $("#enabledPopup").attr("checked", graphicLayer.hasPopup())
          $("#enabledTooltip").attr("checked", graphicLayer.hasTooltip())
          $("#enabledRightMenu").attr("checked", graphicLayer.hasContextMenu())

          const graphics = graphicLayer.getGraphics()
          if (graphics.length > 0) {
            if (!graphics[0].hasOpacity) {
              $("#enabledOpacity").hide()
            }
            if (!graphics[0].hasEdit) {
              $("#enabledEdit").hide()
            }
          }
        }
      }, 500)

      // 图层状态
      $("#enabledShowHide").change(function () {
        let val = $(this).is(":checked")
        graphicLayer.show = val
      })
      // 透明度滑动条
      $("#opacity")
        .slider({ min: 0.0, max: 1.0, step: 0.1, value: 1 })
        .on("change", (e) => {
          if (e?.value) {
            graphicLayer.opacity = e.value.newValue
          }
        })
      $("#onClickFlyTo").click(function () {
        graphicLayer.flyTo()
      })

      // 图层交互
      $("#enabledPopup").change(function () {
        let val = $(this).is(":checked")

        if (val) {
          bindLayerPopup() //map.js中不绑定Popup,可以使用graphic_layer_state.js中的bindLayerPopup2
        } else {
          graphicLayer.unbindPopup()
        }
      })
      $("#enabledTooltip").change(function () {
        let val = $(this).is(":checked")

        if (val) {
          graphicLayer.bindTooltip(
            function (event) {
              const attr = getAttrForEvent(event)
              attr["类型"] = event.graphic?.type
              attr["来源"] = "我是layer上绑定的Toolip"
              attr["备注"] = "我支持鼠标移入交互"

              return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
            },
            { pointerEvents: true }
          )
        } else {
          graphicLayer.unbindTooltip()
        }
      })
      $("#enabledRightMenu").change(function () {
        let val = $(this).is(":checked")

        if (val) {
          bindLayerContextMenu() //map.js中不绑定ContextMenu,可以使用graphic_layer_state.js中的bindLayerContextMenu2
        } else {
          graphicLayer.unbindContextMenu(true)
        }
      })

      // 数据维护
      $("#hasEdit").change(function () {
        let val = $(this).is(":checked")
        graphicLayer.hasEdit = val

        // 编辑时，为了方便操作自动关闭Popup，真实项目中请按需修改
        $("#enabledPopup").attr("checked", !val)
        $("#enabledPopup").change()
      })

      // 数据测试 - 生成和清除
      $("#addRandomGraphicByCount").click(function () {
        addRandomGraphicByCount($("#count").val())
        graphicLayer.flyTo({ duration: 0, heading: 0, pitch: -40, scale: 1.2 })

        const graphics = graphicLayer.getGraphics()
        editorGraphic = graphics[graphics.length - 1]
      })
      $("#onClickClear").click(function () {
        graphicLayer.clear()
      })

      $("#btnImpFile").click(function () {
        $("#input_draw_file").click()
      })

      $("#input_draw_file").change(function (e) {
        let file = this.files[0]
        onClickImpFile(file)
      })
    }

    function opentable() {
      var tablecontainer = document.getElementById("getA");
      tablecontainer.style.display = 'block';
      var table = document.getElementById
    }

    document.addEventListener('click', function(event) {
      var exportvisual = document.getElementById("exportvisual");
      var inportvisual = document.getElementById("inportvisual");
      var laplacevisual = document.getElementById("laplacevisual");

    if(event.target.id === "exportvisual"){
      exportvisual.select_value = 1;
      inportvisual.select_value = 0;
      laplacevisual.select_value = 0;
    }
    if(event.target.id === "inportvisual"){
      exportvisual.select_value = 0;
      inportvisual.select_value = 1;
      laplacevisual.select_value = 0;
    }
    if(event.target.id === "laplacevisual"){
      exportvisual.select_value = 0;
      inportvisual.select_value = 0;
      laplacevisual.select_value = 1;
    }
    toggleChartDisplay()
});
  </script>
</body>

</html>